<template>
  <div class="cmp-prescription-template">
    <el-dialog
      v-model="isVisible"
      width="670px"
      @closed="closed"
      @opened="opened"
    >
      <div
        v-if="!preImageUrl"
        id="prescriptionTemplate"
        class="prescription-template"
      >
        <div class="title">
          {{ form.orgName }}
          <br />
          <!-- 门诊病历 -->
        </div>
        <div class="header">
          <div>
            <span>姓名：{{ form.name }}</span>
            <span>性别：{{ form.sex ? (form.sex ? '男' : '女') : '' }}</span>
            <span>年龄：{{ form.ageName }}</span>
          </div>
          <div>
            <span>病历号：{{ form.id }}</span>
            <span>电话：{{ form.mobile }}</span>
            <span>证件号：{{ form.cardNo }}</span>
          </div>
          <div>
            <span>临床诊断：{{ form.diagnosis }}</span>
          </div>
        </div>
        <div class="body">
          <strong class="Rp-tag Rp-tag_body">
            发病日期：
            <span class="body-content">{{ form.morbidityTime }}</span>
          </strong>
          <strong class="Rp-tag Rp-tag_body">
            主诉：
            <span class="body-content">{{ form.mainSuit }}</span>
          </strong>
          <strong class="Rp-tag Rp-tag_body">
            现病史：
            <span class="body-content">{{ form.historyPresent }}</span>
          </strong>
          <strong class="Rp-tag Rp-tag_body">
            既往史：
            <span class="body-content">{{ form.past }}</span>
          </strong>
          <strong class="Rp-tag Rp-tag_body">
            过敏史：
            <span class="body-content">{{ form.allergy }}</span>
          </strong>
          <strong class="Rp-tag Rp-tag_body">
            个人史：
            <span class="body-content">{{ form.personal }}</span>
          </strong>
          <strong class="Rp-tag Rp-tag_body">
            家族史：
            <span class="body-content">{{ form.family }}</span>
          </strong>
          <strong class="Rp-tag Rp-tag_body">
            体格检查：
            <span class="body-content">{{ form.signs }}</span>
          </strong>
          <strong class="Rp-tag Rp-tag_body">
            实验室及辅助检查：
            <span class="body-content">{{ form.auxiliaryExamination }}</span>
          </strong>
          <strong class="Rp-tag Rp-tag_body">
            治疗意见：
            <span class="body-content">{{ form.treatmentOpinion }}</span>
          </strong>
        </div>
        <div class="footer">
          <div>
            <span>医师：</span>
            <span>{{ form.doctorName }}</span>
          </div>
          <div>
            <span>日期：</span>
            <span>{{ form.morbidityTime }}</span>
          </div>
        </div>
        <div class="sign-content">
          <span>{{ form.orgName }}</span>
          <span>联系电话: {{ form.mobile }}</span>
          <span>{{ form.regionName }}</span>
        </div>
      </div>
      <div class="previewDataURL" v-if="preImageUrl" style="text-align: center">
        <img style="width: 100%" :src="preImageUrl" />
      </div>
      <template #footer>
        <el-button type="primary" @click="submit" :disabled="!preImageUrl">
          提交
        </el-button>
        <el-button
          @click="
            () => {
              isVisible = false
            }
          "
        >
          取消
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import { nextTick, reactive, toRefs } from 'vue'
  import html2Img from './html2Img.vue'
  import filter from '@/hooks/filter.vue'
  import { loadEmrPrintData } from '@/api/modules/medicalHistory'
  import { uploadFile } from '@/api/modules/upload'
  import common from '@/utils/common'
  export default {
    name: 'EmrTemplate',
    setup(props, context) {
      // 初始化及二次赋值
      const d = reactive({
        isVisible: false,
        preImageUrl: null,
        form: {},
        status: null,
      })
      const init = function (id, isVisible = true, status) {
        d.isVisible = isVisible
        d.id = id
        d.status = status
      }

      const toLoad = function (id) {
        common.XmLoading()
        loadEmrPrintData({ id: id })
          .then((res) => {
            common.XmLoading(false)
            d.form = res.data
            toImg()
          })
          .catch(() => {
            common.XmLoading(false)
          })
      }
      const opened = function () {
        toLoad(d.id)
      }
      const closed = function () {
        d.isVisible = false
        d.preImageUrl = null
        d.status = status
        d.form = {}
      }

      const submit = function () {
        // TODO 提交代码
        console.log('preImageUrl =' + d.preImageUrl)
        d.isVisible = false
        context.emit('success', { imgUrl: d.preImageUrl, status: d.status })
      }
      const { htmlToImg } = html2Img()

      const toImg = async function () {
        await nextTick()
        htmlToImg('prescriptionTemplate', (base64) => {
          uploadFile(base64).then((res) => {
            d.preImageUrl = res.data
          })
        })
      }
      return {
        ...toRefs(d),
        ...filter(),
        init,
        closed,
        opened,
        toImg,
        submit,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .prescription-template {
    padding: 24px 12px 12px;
    color: #333;
    position: relative;
    min-height: 525px;

    .title {
      text-align: center;
      padding: 6px 0;
      font-size: 16px;
      width: 450px;
      margin: auto;
    }

    .normal-pres {
      font-size: 12px;
      font-style: normal;
      position: absolute;
      right: 16px;
      top: 54px;
    }

    .header {
      margin-bottom: 10px;

      & > div {
        display: flex;

        span {
          width: 120px;
          flex: 1;
          font-size: 14px;
          color: #333;
          line-height: 26px;
          display: inline-block;
        }
      }
    }

    .body {
      border-top: 2px solid #333;
      padding: 30px 12px;
      border-bottom: 2px solid #333;
      margin-bottom: 10px;

      .Rp-tag {
        font-size: 16px;
        font-weight: bold;
        span: {
          // font-weight: ;
        }
      }

      .Rp-tag_body {
        display: block;
        margin: 15px 0px;
      }
      .el-table {
        margin-top: 0;
      }

      :deep(.cell) {
        color: #333;
      }

      .el-table--border::after,
      .el-table--group::after,
      .el-table::before {
        background-color: #fff;
      }

      :deep(.is-leaf) {
        border: 0;
      }
    }

    .footer {
      display: flex;
      // align-items: flex-end;
      justify-content: flex-end;
      & > div {
        font-size: 15px;
        margin-right: 12px;
        padding: 10px;
        background-color: #f2f2f2;
        border-radius: 1px;
      }
    }
    .sign-content {
      margin-top: 12px;
      & > span {
        margin-right: 10px;
      }
    }
  }
</style>
